<template>
  <el-dialog v-model="dialogVisibleInner" title="收藏编辑" width="800px" draggable :close-on-press-escape="false"
    :close-on-click-modal="false" @close="handleClose" body-class="dialogBody">
    <el-aside class="aside" style="width:100%">
      <el-tree :data="nodeData" :props="defaultProps" default-expand-all :expand-on-click-node="false"
        background-color="#f0f2f5" text-color="#333" highlight-current>
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <div>
              <span v-if="!data.children" class="dot"></span>
              <span>{{ node.label }}</span>
            </div>
            <div style="margin-right:15px" v-show="!data.Id">
              <el-button type="primary" link @click="addClass(data)">新增分类</el-button>
            </div>
            <div style="margin-right:15px" v-show="data.Id">
              <el-button type="danger" link @click="deleteClass(data)">删除</el-button>
            </div>
          </span>
        </template>
      </el-tree>
    </el-aside>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {
  defineComponent,
  ref,
  watch,
} from "vue";
import "../../assets/_highlight.js@11.8.0@highlight.js/styles/monokai-sublime.css";
import { ElMessage, ElMessageBox } from "element-plus";
import { connrequest } from "../../api/connrequest";

export default defineComponent({
  name: "collectDialog",
  props: {
    dialogVisible: Boolean,
    nodeData: Array,
  },
  emits: ["closeDialog", "submitDialog"],
  setup(props, { emit }) {
    const defaultProps = ref({ label: "Name", children: "children" });
    const dialogVisibleInner = ref(false);
    // 监听 dialogVisible 变化以初始化编辑器
    watch(
      () => props.dialogVisible,
      (newValue) => {
        dialogVisibleInner.value = newValue;
      }
    );

    const handleClose = () => {
      dialogVisibleInner.value = false;
      emit("closeDialogClass");
    };
    const addClass = async () => {
      ElMessageBox.prompt('请输入您的分类名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'my-message-box',
        inputValidator: (value) => {
          if (!value || value.trim() === '') {
            return '分类名称不能为空';
          }
          if (value.trim().length > 10) {
            return '分类名称不能超过 10 个字';
          }
          const children = props.nodeData[0].children || [];
          const isNameExist = children.some(item => item.Name === value.trim());
          if (isNameExist) {
            return `名称 "${value}" 已存在，请使用其他名称`;
          }
          return true;
        }
      })
        .then(async ({ value }) => {
          let newarr = props.nodeData[0].children;
          newarr.push({
            Id: Math.floor(Date.now() / 1000),
            Name: value.trim(),
          });
          const data = { Data: newarr };
          const res = await connrequest('SetUserChatCollectClass', data);
          if (res && res.Status.StatusCode === 0) {
            emit('GetUserChatCollectClass');
            handleClose();
            ElMessage.success("新增成功");
          }
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消',
          });
        });
    };
    const deleteClass = async (Data) => {
      if (Data.Id === 1) {
        ElMessage.info("默认分类禁止删除");
        return
      }
      if (Data.Count > 0) {
        ElMessage.info("该分类下还有数据，禁止删除");
        return
      }
      ElMessageBox.confirm(
        '代理将永久删除该分类。是否继续？',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async () => {
          let newarr = props.nodeData[0].children.filter(item => item.Id !== Data.Id)
          const data = {
            Data: newarr
          }
          const res = await connrequest('SetUserChatCollectClass', data)
          if (res && res.Status.StatusCode === 0) {
            handleClose()
            emit('GetUserChatCollectClass')
            ElMessage.success("删除成功");
          }
        })
        .catch(() => {
          ElMessage.info("取消删除");
        })
    };


    return {
      deleteClass,
      defaultProps,
      addClass,
      dialogVisibleInner,
      handleClose,
    };
  },
});
</script>

<!-- 保持原有的 <template> 和 <script> 部分不变 -->
<style lang="scss" scoped>
.custom-tree-node {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #959595;
  border-radius: 50%;
  margin-right: 6px;
}

.count {
  color: #666;
  margin-left: 20px;
  font-size: 12px;
}


:deep(.el-input__wrapper) {
  align-items: flex-start !important;
}

.icon-button {
  color: #909399;
}

.icon-button:hover {
  color: #409eff;
}

:deep(::-webkit-scrollbar) {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

:deep(::-webkit-scrollbar-thumb) {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background: #cfcbcb;
}

:deep(::-webkit-scrollbar-track) {
  /*滚动条里面轨道*/
  background: #2d2c3c;
}

.full-width {
  width: 100%;
}

.chat-message-text {
  width: 100%;
  height: 300px;
  overflow-y: auto;
  align-self: flex-start;
  border-radius: 5px;
  padding: 0 10px;
  background-color: #f4f6f8;
  word-wrap: break-word;
}

.hljs {
  padding: 10px;
  border-radius: 0 0 4px 4px;
}

.code-block-header__copy {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}


.dialog-header {
  display: flex;
  justify-content: space-between;

}

.dialog-header-title {
  display: inline-block;
  width: 180px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #409eff;
  color: #fff;
}

.night {
  .w-e-text-container {
    background: #2a2d3c;
  }

  .chat-message-text {
    background-color: #2a2d3c !important;
    box-shadow: 0 0 0 1px #414556 !important;
  }
}
</style>

<style>
.dialogBody {
  overflow-y: auto !important;
}

:deep(.el-dialog__header) {
  padding: 0 !important;
  margin: 0 !important;
}

/* 自定义消息框样式 */
.my-message-box {
  background-color: #3e4252 !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 16px !important;
}

/* 消息框标题样式 */
.my-message-box .el-message-box__title {
  color: #fff !important;
  font-weight: bold !important;
}

/* 消息框内容样式 */
.my-message-box .el-message-box__content {
  color: #fff !important;
}

/* 输入框外层样式 */
.my-message-box .el-input__wrapper {
  background-color: #2a2d3c !important;
  box-sizing: none;
}

/* 输入框内部样式 */
.my-message-box .el-input__inner {
  background-color: #2a2d3c !important;
  color: #fff !important;
  border: none !important;
}

/* 按钮默认样式 */
.my-message-box .el-button {
  background-color: #909399 !important;
  border-color: #909399 !important;
  color: #fff !important;
}

/* 主按钮样式 */
.my-message-box .el-button--primary {
  background-color: #409EFF !important;
  border-color: #409EFF !important;
}

/* 按钮容器样式 */
.my-message-box .el-message-box__btns {
  display: flex;
  flex-direction: row-reverse;
  /* 反转按钮顺序 */
  justify-content: flex-start;
  gap: 10px;
}
</style>